<template>
<div style="height: 100vh;">
  <el-container style="height: 100%">


    <el-container style="height: 100%">
      <el-header id="ddd">
        小型人事管理系统
        <el-dropdown trigger="click" style="float: right" @command="logout">
           <span style="cursor:pointer">
    用户:{{this.$store.state.userId}}<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item command="userInfo" >个人信息</el-dropdown-item>
            <el-dropdown-item command="changepassword">修改密码</el-dropdown-item>
<!--            <el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
            <el-dropdown-item divided command="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container style="height: 100%">
        <el-aside width="300px">
          <el-tree :data="tree"
                   :props="defaultProps"
                   @node-click="handleNodeClick"
                   node-key="id"


          >

          </el-tree>
        </el-aside>
        <el-container style="flex-grow:1;">
          <el-header height="40px" style="background-color: blue">
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/firstview'&&this.$router.currentRoute.name!='home'">
              <el-breadcrumb-item :to="{ path: '/firstview' }" @click="backtoFirstView">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{path:this.$router.currentRoute.path}" @click="">{{this.$router.currentRoute.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>
          <el-main >
            <div v-show ="1===this.$store.state.viewPage">
              欢迎来到人事管理系统！
            </div>
            <div v-show ="2===this.$store.state.viewPage" class="">
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>

      </el-container>

    </el-container>

  </el-container>
</div>
</template>

<script>
  import {pushView} from './viewjs/personal_informationHandler'
  import {treeHandler}from './viewjs/mainviewTreeHandler'
    export default {
        name: "mainView",

      data() {
        return {
          tree:[

            {
              id:0,
              label: '首页'
            },{
              id:1,
              label: '员工管理',
              children: [{
                id:11,
                label: '个人信息管理',
              },
                {
                  id:12,
                  label: '员工资料管理（管理员）'
                },
                {
                  id:13,
                  label:'员工信息管理（部长）'
                }
              ]
            },
            {
              id:3,
              label: '薪资管理',
              children: [
                {
                 id:31,
                 label:'查看个人薪资'
                },
                {
                  id:301,
                  label: '管理员',
                  children:[
                    {
                      id:32,
                      label:'薪资管理（管理员）'
                    },
                    {
                      id:33,
                      label:'薪资管理（年度）',
                    },
                  ],


                },

                {
                  id:302,
                  label: '部长',
                  children:[
                    {
                      id:34,
                      label:'薪资管理（月度）'
                    },
                    {
                      id:35,
                      label:'薪资管理（年度）',
                    },
                  ],
                }
              ]
            },
            {
              id:4,
              label: '考勤管理',
              children: [
                {
                id: 41,
                label: '管理考勤（Admin）'
                },
                {
                  id: 42,
                  label: '管理考勤（Department）'
                },
                {
                  id: 43,
                  label: '我的考勤（All）'
                },
                        ]
            },
            {
              id:5,
              label: '部门管理',
              children: [
                {
                  id:51,
                  label: '部门信息管理(Admin)'
                },
                {
                  id:52,
                  label: '部门人员管理(Admin)',
                //  （管理员（部长到时直接弄个查询就好惹））
                },
                {
                  id:53,
                  label: '部门管理(Dep)',
                  //  （管理员（部长到时直接弄个查询就好惹））
                },
                {
                  id:54,
                  label: '我的部门(User)',
                  //  （管理员（部长到时直接弄个查询就好惹））
                },
              ]
            },
            {
              id:6,
              label: '培训管理',
              children: [
                {
                  id:61,
                  label: '员工培训管理',
                },
                {
                  id:62,
                  label: '我的培训',
                },
              ]
            },
            {
              id:7,
              label: '招聘管理',
              children: [
                {
                  id:71,
                  label: '部门招聘管理',
                },
                {
                  id:72,
                  label: '管理员招聘管理',
                },
                {
                  id:73,
                  label: '查看招聘信息',
                },
              ]
            },
            {
              id:8,
              label: '系统管理',

            },
              ]



            }
      },
      mounted() {
        this.$store.state.userId = window.sessionStorage.getItem("userId")
        this.$store.state.role = window.sessionStorage.getItem("role")
        // alert(window.sessionStorage.getItem("userId"))
         this.checkToken()
          this.$router.push({path:'/firstview'})
          this.$router.replace('/home')
      },
      methods: {

          checkToken()
          {
            this.$axios.post("/checktokenAndRoleAndTime",{
              userId: this.$store.state.userId
            }).then((res)=>{
              if(res.data.msg =='1')
              {
                this.$message.success("验证成功")
              }else if(res.data.msg =='outlogin') {
                this.$message.error("登录失效，请重新登录！")
                this.$store.commit("setviewPage",1);
                this.$router.push({path:'/'})
              }
            })
          },



        handleNodeClick(data) {
        var  id =JSON.stringify(data.id).replace(/\"/g, "");
        var  label =JSON.stringify(data.label).replace(/\"/g, "");

           //alert(label+" "+id)
          if(id == 0)
          {
            this.checkToken()
            this.$store.commit("setviewPage",1);
            this.$router.push({path:'/firstview'})
          }
          if(id == 11)
          {this.checkToken()
            this.$store.commit("setviewPage",2);
            this.$router.push({path:'/self_employee'})
          }
          if(id == 12)
          {this.checkToken()
            if(this.$store.state.role =='admin')
            {
              this.$store.commit("setviewPage",2);
              this.$router.push({path:'/employee_management'})
            }
            else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 13)
          {this.checkToken()
            if(this.$store.state.role =='department') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/dep_employee'})
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 31)
          {this.checkToken()
            this.$store.commit("setviewPage",2);
            this.$router.push({path:'/UserSalary'})
          }
          if(id == 32)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/AdminSalaryManagement'})
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 33)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/AdminSalaryYearManagement'})
            }else{
              this.$message.error("不够权限哦")
            }

          }
          if(id == 34)
          {this.checkToken()
            if(this.$store.state.role =='department') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/DepMonthManagement'})
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 35)
          {this.checkToken()
            if(this.$store.state.role =='department') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/DepYearManagement'})
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 41)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/AdminAttendanceManagement'})
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 42)
          {this.checkToken()
            if(this.$store.state.role =='department') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/departmentWorkAttendance'})
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 43)
          {this.checkToken()
            this.$store.commit("setviewPage",2);
            this.$router.push({path:'/PersonWorkAttendance'})
          }
          if(id == 51)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/department_summary'});
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 52)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/department_management'});
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 53)
          {this.checkToken()
            if(this.$store.state.role =='department') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/user_department'});
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 54)
          {this.checkToken()
            this.$store.commit("setviewPage",2);
            this.$router.push({path:'/PersonDepartment'});
          }
          if(id == 61)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/home/train_management'});
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 62)
          {this.checkToken()
            this.$store.commit("setviewPage",2);
            this.$router.push({path:'/person_management'});
          }
          if(id == 71)
          {this.checkToken()
            if(this.$store.state.role =='department') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/depjob'});
            }
          else{
            this.$message.error("不够权限哦")
          }
          }
          if(id == 72)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/adminjob'});
            }else{
              this.$message.error("不够权限哦")
            }
          }
          if(id == 73)
          {this.checkToken()
            this.$store.commit("setviewPage",2);
            this.$router.push({path:'/seeforjob'});
          }
          if(id == 8)
          {this.checkToken()
            if(this.$store.state.role =='admin') {
              this.$store.commit("setviewPage", 2);
              this.$router.push({path: '/SystemManagement'});
            }else{
              this.$message.error("不够权限哦")
            }
          }
          // console.log(data);
        },
        changeView(index)
        {
          this.viewPage = index;
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        logout(cmd) {
          if (cmd == 'logout') {
            this.$confirm('此操作将注销登录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              window.sessionStorage.removeItem("userId")
              window.sessionStorage.removeItem("role")
              window.sessionStorage.removeItem("departmentId")
              // this.$store.commit('initRoutes', []);
              this.$router.replace("/");
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              });
            });
          }else if (cmd == 'userInfo') {
            this.$store.commit('setviewPage',2);
                this.$router.push({path:"/personal_information"})
          }
          else if(cmd == 'changepassword')
          {
            this.$store.commit('setviewPage',2);
            this.$router.push({path:"/changepassword"})
          }
        },
        backtoFirstView()
        {
          this.$store.commit("clearviewPage");
        }
      }
    }

</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    float: right;
  }
  .el-container{
    height: 100%;
  }
  #ddd
  {
    text-align: left;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
